import VXETable from "vxe-table";
import common from './common';
import CustomTreeSelect from "../components/CustomTreeSelect";
import VxeCellLabel from "../components/VxeCellLabel";

VXETable.renderer.add("CustomTreeSelect", {
    autofocus: "input.vue-treeselect__input",
    renderEdit(h, renderOpts, params) {
        const { row, column } = params;
        const { attrs, props, filter, optionsFn, optionLabel, valueLabel, beforeList, afterList } = renderOpts;
        if (typeof filter === 'function' && !filter(row)) {
            return [ h('span', { class: 'vxe-cell--label' }, '') ];
        }
        if (typeof optionsFn === 'function') {
            props.options = optionsFn(row);
        }
        return [
            h(CustomTreeSelect, {
                attrs: attrs,
                props: { params, props, optionLabel, valueLabel, beforeList, afterList },
                on: common.getEventOns(renderOpts, params),
            })
        ];
    },
    // 可编辑显示模板
    renderCell(h, renderOpts, params) {
        const { formatter } = renderOpts;
        let cellValue = '';
        if (typeof formatter === 'function') {
            cellValue = formatter(params);
        }
        return [h(VxeCellLabel, {
            props: {
                node: cellValue,
            },
        })];
    }
});
